<template>
  <div class="  container">
    <router-view></router-view>
    <div class="index">
      <Header :user="userInfo" :isShowMyCourse="true"/>
      <div class="main-center2 " style="height: auto; margin-bottom:  0px;">
        <div class="train-con">
          <div class="train-con-list">
            <div class="t-tit">
              <div class="f-back"  @click="goBack()"><img src="static/img/yinyong.png" style="width: 18px; height: 18px;">返回</div>
              <span class="fr  fi-search">
                <el-input v-model="input" style="width: 223px;" class="fl search-inp" placeholder="输入名称搜索"></el-input>
                <el-button class="fl" style="height: 36px;" @click="getInfo(cid, input, page, typeCurrent)">搜索</el-button>
              </span>
            </div>
            <div class="filter">
              <dl>
                <dd :class="{ cur: typeCurrent == -1 }" @click="getInfo('', input, page, -1)">全部</dd>
                <dd :class="{ cur: typeCurrent == index }" v-for="(item, index) in list" :key="index" @click="getInfo(item.id, input, page, index)">{{ item.name }}</dd>
              </dl>
            </div>
            <ul class="  study-c-list" v-if="speed_lesson.length > 0">
              <li v-for="(item, index) in speed_lesson" :key="index">
                <img class="pic" :src="item.image" />
                <div class="name">{{ item.name }}</div>
                <div class="step-pro">
                  <div class="step fl"><div class="process" :style="{ width: item.chapter + '%' }"></div></div>
                  <label class="fr">{{ item.chapter }}%</label>
                </div>

                <div class="act-f">
                  <label class=" act " @click="goDteail(item.cid,item.overduestatus)">学习</label>
                  <label class=" act " @click="getSmall(item.cid)">{{ item.isOpen == true ? '展开' : '收起' }}</label>
                </div>
                <div class="zk-list" v-if="item.isOpen == false">
                  <dl v-for="(items, indexs) in item.small_lesson" :key="indexs">
                    <dt>第{{ indexs +1}}节:{{items.name}}</dt>
                    <dd class="step-my">
                      <div class="step"><div class="process" :style="{ width: items.chapter + '%' }"></div></div>
                      <label class="fr">{{ items.chapter }}%</label>
                    </dd>
                    <dd class="act-area"><label class=" act " @click="goDteail(items.course_id,items.overduestatus,items.content_id)">学习</label></dd>
                  </dl>
                </div>
              </li>
            </ul>
            <div class="" v-else><el-empty description="暂无内容"></el-empty></div>
            <div class="page-area">
              <span type="button" class="btn-home fl" style="cursor: pointer;" @click="getInfo(cid,input,1,typeCurrent)">
                首页
              </span>
              <el-pagination
                background
                layout="  prev, pager, next "
                :current-page="currentPage"
                :total="total"
                :page-size="1"
                @current-change="handleCurrentChange"
              ></el-pagination>
              <span type="button" style="cursor: pointer;" class="btn-last fr" @click="getInfo(cid,input,total,typeCurrent)">
                尾页
              </span>
            </div>
            <div class="clear"></div>
            <!--  <Copyright /> -->
          </div>
        </div>
      </div>
    </div>

   <div class="r-xcx" ><span class="sp">微信小程序</span>
      <div class="r-xcx2" >
        <h3>培训平台小程序</h3>
        <img width="169" style="margin-top: 26px;" src="/static/img/qr.png" />
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../../components/header_train.vue';
import Copyright from '../../components/copyright2.vue';
export default {
  data() {
    return {
      input: '',
      isOpen: true, //是否展开章节
      value: [],
      list: [], //分类信息
      userInfo: JSON.parse(localStorage.getItem('userInfo')), //用户信息
      speed_lesson: [], //课程进度
      small_lesson: [], //课程小章节进度
      token: localStorage.getItem('token'),
      cid: '',
      page: 1,
      typeCurrent: -1,
      total: 1,
      currentPage: 1,

    };
  },
  created() {
    this.getInfo();
    this.getList();
  },

  methods: {
    goBack() {
      this.$router.go(-1);
    },
    //获取小章节课程信息
    getSmall(id) {
      this.isOpen = true;
      let formData = {
        token: this.token,
        course_id: id
      };
      this.$api('getCourseList.small_speed', formData).then(res => {
        if (res.data == null) {
          this.$message({
            message: res.msg,
            type: 'warning'
          });
          return;
        }
        this.speed_lesson.forEach((item, index) => {
          if (item.cid == id) {
            item.small_lesson = res.data;
            item.isOpen = !item.isOpen;
            if (res.data != null) {
              this.$set(item);
            }
          }
        });
      });
    },
    handleCurrentChange(e) {
      //console.log(e);
      this.p = e;
      this.getInfo(this.cid, this.keyword, this.p,this.currentPage);
    },
    getList() {
      let formData = {
        token: this.token
      };
      //课程分类
      this.$api('getCourseList.getCategoryList', formData).then(res => {
        this.list = res.data;
      });
    },
    //获取课程信息
    getInfo(cid, keyword, p, index) {
      this.cid = cid;
      this.p = p;
      this.input = keyword;
      this.currentPage = 1;
      if (index != undefined) {
        this.typeCurrent = index;
      }

      let speed_form = {
        token: this.token,
        page: this.p,
        limit: 5,
        cid: this.cid,
        keyword: this.input
      };
      this.$api('getCourseList.study_speed', speed_form).then(res => {
        this.speed_lesson = res.data.data;
        this.total = res.data.last_page;
        this.speed_lesson.forEach(item => {
          this.$set(item, 'isOpen', true);
        });
      });
    },

    goDteail(id,status,classid) {
      if(status==1){
        this.$message({
          message: '课程已过期，无法查看',
          type: 'info'
        });
        return;
      }
      this.$router.push('/trainplay?id='+id+'&classid='+classid);
    },
    goCourse() {
      this.$router.push('/courseList');
    },
    goCollect() {
      this.$router.push('/courseCollect');
    }
  },
  components: { Header, Copyright }
};
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner {
  height: 36px;
  line-height: 35px;
  outline: 0;
}
</style>
